<template>
  <div class="UserTopic">
    <p class="UserTopic_title">作者其他话题</p>
    <ul class="UserTopic_ul">
      <li class="UserTopic_ul_li" v-for="(v, i) of list" :key="i">
        <router-link :to="'/topic/' + v.origin_id">
          <p>{{ v.title }}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getUserOtherTopic(id) {
      this.axios
        .get("/get/user/other/topic?id=" + id)
        .then((res) => {
          // console.log(res.data);
          this.list = res.data.results;
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.message);
        });
    },
  },
  watch: {
    id: function (id) {
      this.getUserOtherTopic(id);
    },
  },
};
</script>

<style>
.UserTopic {
  margin-bottom: 13px;
  background: #fff;
  padding-bottom: 20px;
  border-radius: 0 0 3px 3px;
}
.UserTopic_title {
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  background: #f5f5f5;
  margin-bottom: 14px;
  font-size: 14px;
  color: #444;
}
.UserTopic_ul {
  list-style: none;
}
.UserTopic_ul_li {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 15px;
}
.UserTopic_ul_li p {
  color: #778087;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  font-size: 14px;
}
</style>